<template>
  <div>
    <!--面包屑-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片-->
    <el-card class="box-card">
      <el-row :gutter="20">
        <!--搜索框-->
        <el-col :span="6">
          <el-input placeholder="请输入账号" v-model="queryParams.username" clearable @clear="getUserList" @keyup.enter.native="getUserList">
            <el-button slot="append" icon="el-icon-search" @click="getUserList" class="search"></el-button>
          </el-input>
        </el-col>
      </el-row>
      <!--表格-->
      <el-table :data="userList" :cell-style="cellStyle" border stripe>
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="账号" prop="username"></el-table-column>
        <el-table-column label="角色" prop="is_superuser"></el-table-column>
        <el-table-column label="昵称" prop="nickname"></el-table-column>
        <el-table-column label="手机" prop="phone"></el-table-column>
        <el-table-column label="邮箱" prop="email"></el-table-column>
        <el-table-column label="注册时间" prop="create_time"></el-table-column>
      </el-table>
      <!--分页-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.p"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="queryParams.s"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getUsers } from '../../api/api'

export default {
  created () {
    this.getUserList()
  },
  data () {
    return {
      queryParams: {
        p: 1,
        s: 10,
        username: ''
      },
      tmpName: '',
      userList: [],
      total: 0
    }
  },
  methods: {
    // 获取用户列表
    getUserList () {
      if (this.queryParams.name !== this.tmpName) {
        this.tmpName = this.queryParams.name
        this.queryParams.p = 1
      }
      getUsers(this.queryParams).then(response => {
        if (response.data.code !== 0) return this.$message.error('获取用户列表失败！')
        this.userList = response.data.data.results
        this.total = response.data.data.count
      })
    },
    // 监听size变化
    handleSizeChange (newSize) {
      this.queryParams.s = newSize
      this.getEnvironmentList()
    },
    // 监听页码变化
    handleCurrentChange (newPage) {
      this.queryParams.p = newPage
      this.getEnvironmentList()
    },
    // 表格样式
    cellStyle (data) {
      if (data.column.label === '账号') {
        return 'color: #409EFF'
      }
    }
  }
}
</script>

<style lang="less" scoped>

</style>
